<template>
  <div>
    <div class="ccui-app-container">
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          ref="Heightsearch"
          :formProp="formData"
          @search="searchItem"
          :isShowSearch="isShowSearch"
          class="ccui-highsearch no-print"
          :selectClear="true"
          width="340px"
          :spoNum="3"
        >
          <div class="ccui-tab-wrapper">
            <el-button type="table-top-active" size="mini">
              退货登记({{ total }})
            </el-button>
          </div>
          <div class="ccui-extend-btn" style="display: flex">
            <el-button
              size="mini"
              type="primary"
              icon="icon-ccui-add-sup"
              style="float: right"
              @click="handleAdd"
            >
              新增</el-button
            >
          </div>
          <template slot="search">
            <el-input
              v-model="formData.categoryName"
              placeholder="请输入分类名称模糊查询"
              searchLabel="分类名称"
              clearable
            ></el-input>
            <el-input
              v-model="formData.bowOutNumber"
              placeholder="请输入退货单编号模糊查询"
              searchLabel="退货单编号"
              clearable
            ></el-input>
            <el-input
              v-model="formData.acceptanceNumber"
              placeholder="请输入验收单编号模糊查询"
              searchLabel="验收单编号"
              clearable
            ></el-input>
            <el-input
              v-model="formData.orderNumber"
              placeholder="请输入订单编号模糊查询"
              searchLabel="订单编号"
              clearable
            ></el-input>
            <el-input
              v-model="formData.reportInOrgName"
              placeholder="请输入填报单位模糊查询"
              searchLabel="填报单位"
              clearable
            ></el-input>

            <el-select
              v-model="formData.submitStatus"
              searchLabel="状态"
              placeholder="请选择状态查询"
            >
              <el-option
                v-for="item in submitStatus"
                :key="item.dicKey"
                :label="item.dicValue"
                :value="item.dicKey"
              >
              </el-option>
            </el-select>
            <el-input
              v-model="formData.supplier"
              placeholder="请输入供应商模糊查询"
              searchLabel="供应商"
              clearable
            ></el-input>
            <el-input
              v-model="formData.acceptor"
              placeholder="请输入验收人模糊查询"
              searchLabel="验收人"
              clearable
              slot="searchItem8"
            ></el-input>
          </template>
          <el-input
            v-model="formData.categoryName"
            placeholder="请输入分类名称模糊查询"
            searchLabel="分类名称"
            slot="searchItem5"
            clearable
          ></el-input>
          <el-input
            v-model="formData.bowOutNumber"
            placeholder="请输入退货单编号模糊查询"
            searchLabel="退货单编号"
            slot="searchItem1"
            clearable
          ></el-input>
          <el-input
            v-model="formData.acceptanceNumber"
            placeholder="请输入验收单编号模糊查询"
            searchLabel="验收单编号"
            slot="searchItem2"
            clearable
          ></el-input>
          <el-input
            v-model="formData.orderNumber"
            placeholder="请输入订单编号模糊查询"
            searchLabel="订单编号"
            slot="searchItem3"
            clearable
          ></el-input>
          <el-input
            v-model="formData.reportInOrgName"
            placeholder="请输入填报单位模糊查询"
            searchLabel="填报单位"
            slot="searchItem4"
            clearable
          ></el-input>

          <el-select
            v-model="formData.submitStatus"
            searchLabel="状态"
            placeholder="请选择状态查询"
            slot="searchItem6"
          >
            <el-option
              v-for="item in submitStatus"
              :key="item.dicKey"
              :label="item.dicValue"
              :value="item.dicKey"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="formData.supplier"
            placeholder="请输入供应商模糊查询"
            searchLabel="供应商"
            clearable
            slot="searchItem7"
          ></el-input>
          <el-input
            v-model="formData.acceptor"
            placeholder="请输入验收人模糊查询"
            searchLabel="验收人"
            clearable
            slot="searchItem8"
          ></el-input>
        </el-search>
      </div>

      <!-- 表格数据 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          align="center"
          ref="listDataTable"
          :data="tableData"
          :isshow="true"
          border
          max-height="9999"
          class="ccui-multifunctional-table"
        >
          <el-table-column type="index" label="序号" width="48" fixed="left" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="bowOutNumber"
            label="退货单编号"
            style="color: #0089ef; cursor: pointer"
            width="160"
            fixed="left"
          >
            <template slot-scope="scope">
              <span
                style="color: #0089ef; cursor: pointer"
                @click="checkList(scope.row)"
                >{{ scope.row.bowOutNumber }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="bowOutName"
            label="退货单名称"
            width="300"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="acceptanceNumber"
            label="验收单编号"
            width="160"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="invoiceNumber"
            label="发货单编号"
            width="130"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderNumber"
            label="订单编号"
            width="130"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="reportInOrgName"
            label="填报单位"
            width="200"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="categoryName"
            label="分类名称"
            width="100"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="acceptanceCurrentNumber"
            label="验收数量"
            width="80"
          >
            <template slot-scope="{ row }">
              <span>{{ row.acceptanceCurrentNumber | filterNum }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :show-overflow-tooltip="true"
            prop="bowOutCurrentNumber"
            label="退货数量"
            width="80"
          >
            <template slot-scope="{ row }">
              <span>{{ row.bowOutCurrentNumber | filterNum }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            :show-overflow-tooltip="true"
            prop="bowOutPlace"
            label="退货地点"
            width="200"
          /> -->
          <el-table-column
            :show-overflow-tooltip="true"
            prop="acceptancePhone"
            label="验收人联系电话"
            width="130"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="compilePeople"
            label="编制人"
            width="100"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="submitStatus"
            label="状态"
            width="70"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.submitStatus | filterSumbit }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="操作"
            width="80"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                :disabled="scope.row.submitStatus == 0 ? false : true"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="ccui-table-footer" v-if="tableData.length">
          <div id="ccui-paging">
            <el-pagination
              :total="total"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              prev-text="< 上一页"
              next-text="下一页 >"
              background
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleGoPage"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listBowOutCertPage,
  getBowOutCert,
  removeBowOutCert
} from "../api/bowOut";
export default {
  data() {
    return {
      isShowSearch: true,
      formData: {
        bowOutNumber: "", //退货单编号
        acceptanceNumber: "", //验收单编号
        orderNumber: "", //订单编号
        reportInOrgName: "", //填报单位
        categoryName: "", //分类名称
        submitStatus: "",
        supplier: "", //供应商
        acceptor: "" //验收人
      },
      pageSizeCode: 1,
      pageNoCode: 1,
      pagesize: 10,
      total: 0,
      tableData: [],
      submitStatus: [
        { dicKey: 0, dicValue: "待提交" },
        { dicKey: 1, dicValue: "已提交" }
        // { dicKey: 2, dicValue: "营业税纳税人" }
      ]
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.$refs.Heightsearch.resetForm();
    this.getList();
  },
  methods: {
    getList() {
      listBowOutCertPage({
        pageNo: this.pageNoCode,
        pageSize: this.pagesize,
        businessType: "1"
      }).then(res => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.recordsTotal;
      });
    },
    searchItem(searchObj) {
      let searchVal = {};
      if (searchObj) {
        searchVal = JSON.parse(JSON.stringify(searchObj));
      }
      let obj = {
        bowOutNumber: searchVal.bowOutNumber, //退货单编号
        acceptanceNumber: searchVal.acceptanceNumber, //验收单编号
        orderNumber: searchVal.orderNumber, //订单编号
        reportInOrgName: searchVal.reportInOrgName, //填报单位
        categoryName: searchVal.categoryName, //分类名称
        submitStatus: searchVal.submitStatus,
        pageNo: this.pageNoCode,
        pageSize: this.pagesize,
        acceptor: searchVal.acceptor,
        supplier: searchVal.supplier
      };
      listBowOutCertPage(obj).then(res => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.recordsTotal;
      });
    },
    // 新增
    handleAdd() {
      this.$router.push(
        "/checkManagement/returnsManage/salesRegister-list-add"
      );
    },
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getList();
      this.searchItem();
    },
    handleCurrentChange(val) {
      this.pageNoCode = val;
      this.searchItem();
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {
      console.log(111);
    },
    // 查看
    checkList(item) {
      console.log(item);
      this.$router.push({
        path: "/checkManagement/returnsManage/salesRegister-list-check",
        query: {
          id: item.id,
          bowOutName: item.bowOutName
        }
      });
    },
    // 编辑
    handleEdit(item) {
      getBowOutCert({ id: item.id }).then(res => {
        this.$router.push({
          path: "/checkManagement/returnsManage/salesRegister-list-add",
          query: {
            bowOutBillBOList: res.data.data.bowOutBillBOList,
            bowOutCertBO: res.data.data.bowOutCertBO,
            bowOutFiles: res.data.data.bowOutFiles,
            submitStatus: item.submitStatus
          }
        });
      });
    },
    // 删除表格某一行
    handleDelete(item) {
      this.$confirm("您确定要删除吗？", "删除确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom"
      })
        .then(() => {
          removeBowOutCert({ id: item.id }).then(res => {
            if (res.data.code == "0") {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: "success",
                ccuiCustom: true
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getList();
  },
  filters: {
    filterSumbit(value) {
      if (value == 1) {
        return "已提交";
      } else if (value == 0) {
        return "待提交";
      }
    },
    filterNum(value) {
      let newVal = value.toFixed(3);
      return newVal;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  margin-top: 20px;
}
/deep/ .el-table__body-wrapper {
  z-index: 1;
}
/deep/.ccui-advanced-search-wrapper
  .el-search
  .ccui-search-wrapper
  .el-searchs
  .el-searchs-right
  .el-input__inner {
  padding: 0 8px 0 0 !important;
}
/deep/.ccui-multifunctional-table-wrapper {
  margin-top: 0px !important;
}
</style>
